import React, { Component } from 'react'
import { HeaderBar, FooterBar, CartList, Toast, TotalPrice } from '../../components'
import '../../mock'
import cartStyle from './cart.module.scss'
import axios from 'axios'
export default class Cart extends Component {
  state = {
    showToast: false,
    list: [],
  }

  // 删除商品函数
  handleReduceItem(id) {}

  handleAddItem(id) {}

  async fetchCartData() {
    const response = await axios.get('/api/list')
    this.setState({
      list: response.data.data,
    })
  }

  componentDidMount() {
    this.fetchCartData()
  }

  render() {
    const { list } = this.state
    return (
      <div className={cartStyle['cart-container']}>
        {/* {{ a: 1 }} */}
        {/* {[1, 2, 3, 4]} */}
        {this.state.showToast ? (
          <Toast
            handleCloseToast={(index) => {
              this.setState({
                showToast: false,
              })
            }}
          ></Toast>
        ) : null}

        <header className={cartStyle['cart-header']}>
          <HeaderBar />
        </header>
        <main className={cartStyle['cart-main']}>
          {list.map((item, i) => {
            return (
              <CartList
                key={item.id}
                item={item}
                handleAddItem={(id) => this.handleAddItem(id)}
                handleReduceItem={(id) => this.handleReduceItem(id)}
              />
            )
          })}
        </main>
        <div className={cartStyle['cart-footer']}>
          <FooterBar></FooterBar>
        </div>
      </div>
    )
  }
}
